<template>
  <div>
    <div>
      <div id="search-panel">
        <input
          v-model="searchKeyword"
          style="height: 40px"
          @input="handleInput"
          placeholder="搜索地点"
        />
        <ul v-if="searchResults.length">
          <li
            v-for="item in searchResults"
            :key="item.id"
            @click="selectPlace(item)"
          >
            {{ item.name }}
          </li>
        </ul>
        <input v-model="start" style="height: 40px" placeholder="请输入起点" />
        <input v-model="end" style="height: 40px" placeholder="请输入终点"  @blur="getcarPrice"/>
        <button @click="searchRoute">查看路线</button>
<!--        <el-checkbox-group v-model="checkList" @change="getCheck">-->
<!--          <el-checkbox label="2">新能源型{{xnyPrice}}/元,预估时间：{{xnyPrice}}</el-checkbox>-->
<!--          <el-checkbox  label="3">舒適性{{shuPrice}}/元,预估时间：{{shuPrice}}</el-checkbox>-->
<!--          <el-checkbox  label="4">商务型{{haoPrice}}/元,预估时间：{{shuPrice}}</el-checkbox>-->
<!--          <el-checkbox  label="5">优选型{{youPrice}}/元,预估时间：{{youPrice}}</el-checkbox>-->
<!--        </el-checkbox-group>-->
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="item in carData"
            :key="item.carType"
            :label="item.carType"
          >
            {{ item.name }} {{ item.price }}元, 预估时间：{{ item.duration }}分钟
          </el-checkbox>
        </el-checkbox-group>

        <button type="primary" @click="gopayOpen">确认呼叫</button>
        <!-- 请先支付 -->
        <el-dialog :title="请先支付" :visible.sync="open" width="680px" append-to-body>
          <el-form ref="form"  :rules="rules" label-width="100px">
            需要付款：{{payPrice}}
            <img :src="weChatPayQRCodeUrl"/>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="goPay('wechat')">微信支付</el-button>
            <el-button type="primary" @click="goPay('alipay')">支付宝支付</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        <div style="margin: auto">
          <div>
            <span>起始点：{{ start }}</span>
          </div>
          <div>
            <span>终点：{{ end }}</span>
          </div>
        </div>
      </div>
      <div id="container"></div>
      <div class="input-card-ControlBar">
        <div class="input-item">
          <el-checkbox @change="toggleScale" :checked="toggleScaleCheck"
          >比例尺</el-checkbox
          >
        </div>

        <div class="input-item">
          <el-checkbox @change="toggleToolBar" :checked="toggleToolBarCheck"
          >工具条</el-checkbox
          >
        </div>

        <div class="input-item">
          <el-checkbox
            @change="toggleControlBar"
            :checked="toggleControlBarCheck"
          >工具条方向盘</el-checkbox
          >
        </div>

        <div class="input-item">
          <el-checkbox
            @change="toggleOverViewShow"
            :checked="toggleOverViewShowCheck"
          >显示鹰眼</el-checkbox
          >
        </div>
      </div>
      <div class="input-card-MouseTool" style="width: 19rem">
        <div class="input-item">
          左击获取经纬度: <input type="text" :value="clickValue" />
        </div>

        <div class="input-item">
          <!-- <input type="radio" v-model="drawOptionValue" value="drawOptions[0].vlaue"  @change="onChangeDrawOption" /> -->
          <el-radio
            v-model="drawOptionValue"
            label="marker"
            @change="onChangeDrawOption"
          >{{ drawOptions[0].label }}</el-radio
          >
          <el-radio
            v-model="drawOptionValue"
            label="polyline"
            @change="onChangeDrawOption"
          >{{ drawOptions[1].label }}</el-radio
          >
          <el-radio
            v-model="drawOptionValue"
            label="polygon"
            @change="onChangeDrawOption"
          >{{ drawOptions[2].label }}</el-radio
          >
          <el-radio
            v-model="drawOptionValue"
            label="rectangle"
            @change="onChangeDrawOption"
          >{{ drawOptions[3].label }}</el-radio
          >
          <el-radio
            v-model="drawOptionValue"
            label="circle"
            @change="onChangeDrawOption"
          >{{ drawOptions[4].label }}</el-radio
          >
          <el-radio
            v-model="drawOptionValue"
            label="routePath"
            @change="onChangeDrawOption"
          >{{ drawOptions[5].label }}</el-radio
          >
          <el-radio
            v-model="drawOptionValue"
            label="position"
            @change="onChangeDrawOption"
          >{{ drawOptions[6].label }}</el-radio
          >
        </div>
        <div class="input-item" style="margin-top: 10px">
          <button
            type="primary"
            size="small"
            style="width: 90px"
            @click="clearMap"
          >
            清除
          </button>
          <button
            type="primary"
            size="small"
            style="margin-left: 10px; width: 90px"
            @click="closeDram"
          >
            关闭绘图
          </button>
        </div>
      </div>

    </div>
    <!-- 地图容器 -->
    <div id="my-panel"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {addOrder,getPrice,getCarType} from "@/api/system/passenger";
import {payType} from "@/api/user/order";


export default {
  name: "MapContainer",
  components: {},

  props: {
    visible: Boolean,
    drewData: Array,
    routePathP: Array,
  },
  data() {
    return {
      xnyPrice:'',
      shuPrice:'',
      haoPrice:'',
      youPrice:'',
      open:false,
      carPrice:{},
      form:{},
      checkList:[],
      carData:[],
      start: "", // 起点
      end: "", // 终点
      driving: null, // 驾车路线规划服务对象
      searchKeyword: "", // 搜索框的值
      searchResults: [], // 搜索结果
      autoComplete: null, //用于自动完成的实例
      markers: [], // 存储标点
      infoWindowData: [
        //数据可自行修改
        {
          lng: 116.397128,
          lat: 39.916527,
        },
        {
          lng: 116.42,
          lat: 39.92,
        },
        {
          lng: 116.41,
          lat: 39.91,
        },
        {
          lng: 116.42,
          lat: 39.91,
        },
        {
          lng: 116.42,
          lat: 39.91,
        },
      ],
      startPoint: {
        latitude: 26.56045894387685, //纬度
        longitude: 106.68005128661751, //经度
        name: "",
        address: "",
      },
      AMap: null,
      //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
      map: null,
      mouseTool: null,
      //监听draw事件可获取画好的覆盖物
      overlays: [],
      auto: null,
      placeSearch: null,
      drawOptionValue: "",
      drawOptions: [
        { label: "画点", value: "marker" },
        { label: "画折线", value: "polyline" },
        { label: "画多边形", value: "polygon" },
        { label: "画矩形", value: "rectangle" },
        { label: "画圆", value: "circle" },
        { label: "路径规划", value: "routePath" },
        { label: "获取经纬度", value: "position" },
      ],
      //--地图控件 --
      toggleOverViewShowCheck: true,
      toggleControlBarCheck: true,
      toggleToolBarCheck: true,
      toggleScaleCheck: true,
      scale: null,
      toolBar: null,
      controlBar: null,
      overView: null,
      //坐击经纬度
      clickValue: "",
      //可拖拽路线规划
      route: null,
      routePath: this.routePathP,
      startAndEnd: [],
      payPrice:0,
      outTradeNo:"",
      weChatPayQRCodeUrl:""
    };
  },
  mounted() {
    let userId = window.sessionStorage.getItem("userId");
    if (userId != null) {
      console.log("当前登录用户id为：" + userId);
      this.userId = userId;
      //检查当前用户登录状态
      this.checkPsgLoginStatus();
    } else {
      console.log("当前无登录人");
    }
    this.initAMap();
    // this.addMapControls();
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {
    overlays(newVal, oldVal) {
      this.$emit("getOverlaysValue", newVal);
    },
    drewData(newValue, oldValue) {
      this.mountDrewData();
    },
    routePathP(newValue, oldValue) {
      this.routePath = this.routePathP;
      this.initPathAssign(this.AMap);
    },
    startAndEnd(newValue, oldValue) {
      if (this.startAndEnd.length == 2) {
        this.routePath = this.startAndEnd.map((item) => {
          return item.getPosition();
        });
        this.initPathAssign(this.AMap);
        this.startAndEnd.forEach((item) => {
          item.remove();
        });
        this.startAndEnd = [];
      }
    },
  },
  methods: {
    //获取价格
    getcarPrice(){
      this.carPrice.fromAddress = this.start;
      this.carPrice.toAddress = this.end;
      getPrice(this.carPrice).then(res => {
        this.carData = res.data; // 直接将返回的数据赋值给carData
        console.log("nsvnkvf0"+this.carData)
      });
      // this.carPrice.fromAddress=this.start;
      // this.carPrice.toAddress=this.end;
      // getPrice(this.carPrice).then(res=>{
      //     console.log("vnkvf"+res)
      //
      //   const duration = res.data.map(item => parseFloat(item.duration));
      //   const prices = res.data.map(item => parseFloat(item.price).toFixed(2));
      //   var carprice = prices.toString().split(",");
      //   this.xnyPrice=carprice[0];
      //   this.shuPrice=carprice[1];
      //   this.haoPrice=carprice[2];
      //   this.youPrice=carprice[3];
      //
      //   this.xnyDuration=duration[0];
      //   this.shuDuration=duration[1];
      //   this.haoDuration=duration[2];
      //   this.youDuration=duration[3];



      // })
    },
    //支付页面
    gopayOpen(){
      // 确保checkList只有一个元素
      if (this.checkList.length !== 1) {
        alert('Invalid selection. Please select exactly one car type.');
        return;
      }

      // 获取所选车型的ID和价格
      const selectedCarType = this.checkList[0];
      const selectedCarPrice = this.carData.find(item => item.carType === selectedCarType)?.price;

      if (!selectedCarPrice) {
        console.error('Selected car type price not found.');
        return;
      }

      // 设置表单数据
      this.form.fromAddress = this.start;
      this.form.toAddress = this.end;
      this.form.carType = selectedCarType;
      this.form.price = selectedCarPrice;
      // console.log("最终气死俺"+this.start);
      // console.log("最终气死俺"+this.end);
      // this.form.fromAddress=this.start;
      // this.form.toAddress=this.end;
      // let carType=this.checkList.join(",")
      // this.form.carType=carType;
      // this.form.price=carType;
      addOrder(this.form).then(response => {
        console.log(response.data.outTradeNo)
        this.outTradeNo=response.data.outTradeNo;
        this.payPrice=response.data.price;
        console.log(response.data.actualPrice)
      })
      this.open=true;
    },
    //支付
    goPay(type){
      payType(type,this.outTradeNo,this.payPrice).then(
        res=>{
          console.log(res.data)
          if (res.data.qrcode!=null){
            this.weChatPayQRCodeUrl = res.data.qrcode;
          }else {
            window.open(res.data)
          }

        }
      )
    },
    //检查用户登录状态
    checkPsgLoginStatus() {},
    //跳转乘客登录页面
    toPsgLoginPage() {
      this.$router.push("/psgLogin");
    },
    toggleOverViewShow(e) {
      this.toggleOverViewShowCheck = e;
      if (e) {
        this.overView.show();
      } else {
        this.overView.hide();
      }
    },
    toggleControlBar(e) {
      this.toggleControlBarCheck = e;
      if (e) {
        this.controlBar.show();
      } else {
        this.controlBar.hide();
      }
    },
    toggleToolBar(e) {
      this.toggleToolBarCheck = e;
      if (e) {
        this.toolBar.show();
      } else {
        this.toolBar.hide();
      }
    },
    toggleScale(e) {
      console.log(e);
      this.toggleScaleCheck = e;
      console.log(111111);
      if (e) {
        this.scale.show();
      } else {
        this.scale.hide();
      }
    },
    closeDram() {
      this.mouseTool.close(true);
      this.drawOptionValue = "";
    },
    clearMap() {
      this.map.remove(this.overlays);
      this.overlays = [];
      this.route.destroy();
      this.$emit("getRoutePath", []);
      // this.$emit('getOverlaysValue', this.overlays)
    },
    onChangeDrawOption(e) {
      console.log(e);
      console.log("radio checked", e);
      this.draw(e);
    },
    initMapTool() {
      this.scale = new AMap.Scale();
      this.toolBar = new AMap.ToolBar({
        position: {
          top: "110px",
          right: "40px",
        },
      });
      this.controlBar = new AMap.ControlBar({
        position: {
          top: "10px",
          right: "10px",
        },
      });
      this.overView = new AMap.HawkEye({
        position: {
          top: "10px",
          left: "10px",
        },
        opened: false,
      });
      this.map.addControl(this.scale);
      this.map.addControl(this.toolBar);
      this.map.addControl(this.controlBar);
      this.map.addControl(this.overView);
    },
    initMouseTool(AMap) {
      this.mouseTool = new AMap.MouseTool(this.map);
      // 监听draw事件可获取画好的覆盖物
      this.mouseTool.on(
        "draw",
        function (e) {
          this.overlays.push(e.obj);
        }.bind(this)
      );
      //为地图注册click事件获取鼠标点击出的经纬度坐标
      this.map.on(
        "click",
        function (e) {
          if (this.drawOptionValue == "routePath") {
            if (this.startAndEnd.length == 0) {
              let start = new AMap.Marker({
                icon: "//webapi.amap.com/theme/v1.3/markers/n/start.png",
                position: [e.lnglat.getLng(), e.lnglat.getLat()],
                offset: new AMap.Pixel(-13, -30),
              });
              start.setMap(this.map);
              this.startAndEnd.push(start);
            } else if (this.startAndEnd.length == 1) {
              let end = new AMap.Marker({
                icon: "//webapi.amap.com/theme/v1.3/markers/n/end.png",
                position: [e.lnglat.getLng(), e.lnglat.getLat()],
                offset: new AMap.Pixel(-13, -30),
              });
              end.setMap(this.map);
              this.startAndEnd.push(end);
            }
          }
          if (this.drawOptionValue == "position") {
            this.clickValue = e.lnglat.getLng() + "," + e.lnglat.getLat();
          }
        }.bind(this)
      );
      this.mountDrewData();
    },
    mountDrewData() {
      if (this.drewData != null) {
        this.drewData.forEach((item) => {
          this.drew(item.overlayType, item.opts);
        });
      }
    },

    updateMindPointContext: function () {
      let pathList = this.route._list;
      console.log(pathList);
      let startPoint = pathList[0];
      let endPoint = pathList[pathList.length - 1];
      let mindPoint = [];
      pathList.forEach((item) => {
        if (item.id != startPoint.id && item.id != endPoint.id) {
          mindPoint.push(item);
        }
      });
      let count = 1;
      mindPoint.forEach((item) => {
        item.marker._opts.label.content = "经过点" + count;
        count++;
        item.marker.setContent(""); //需要set一下上面代码才会生效
      });
      pathList = [];
      pathList.push(startPoint);
      pathList.push(...mindPoint);
      pathList.push(endPoint);
      this.route._list = pathList;
    },
    initPathAssign() {
      this.route = new AMap.DragRoute(
        this.map,
        this.routePath,
        AMap.DrivingPolicy.LEAST_FEE,
        {
          midMarkerOptions: {
            // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
            label: {
              content: "路径点" + (this.routePath.length - 1),
            },
          },
        }
      ); //构造拖拽导航类
      this.route.search(); //查询导航路径并开启拖拽导航
      this.route.on(
        "addway",
        function (e) {
          // e.target.midMarkerOptions.icon= '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-'+(this.route.getWays().length+1)+'.png'
          e.target.midMarkerOptions.label.content =
            "路径点" + (this.route.getWays().length + 1);
          this.$emit("getRoutePath", this.route._path);
        }.bind(this)
      );
      this.updateMindPointContext();
    },
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "e94e0e0afa1842f9327e06ca955297a7",
      };
      AMapLoader.load({
        key: "d0a13e507309316024509a088bf8cfee", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale",
          "AMap.Geolocation",
          "AMap.ToolBar",
          "AMap.PlaceSearch",
          "AMap.Driving",
          "AMap.ControlBar",
          "AMap.HawkEye",
          "AMap.MapType",
          "AMap.AutoComplete",
          "Amap.Geocoder",
          "AMap.MouseTool",
          "AMap.DragRoute",
          "Amap.DrivingPolicy",
        ], //需要使用的的插件列表
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "2D", // 是否为3D地图模式
            zoom: 13, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
            resizeEnable: true,
          });
          // toolbar.hide(); //缩放工具隐藏
          // 添加定位控件
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认：true
            timeout: 10000, // 设置定位超时时间，默认：无穷大
            offset: [10, 20], // 定位按钮的停靠位置的偏移量
            zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            position: "RB", //  定位按钮的排放位置,  RB表示右下
          });

          //获取当前位置
          geolocation.getCurrentPosition((status, result) => {
            if (status == "complete") {
              // 定位成功
              this.map.setCenter([result.position.lng, result.position.lat]);
              this.startPoint.longitude = result.position.KL;
              this.startPoint.latitude = result.position.kT;
              console.log(
                this.startPoint.longitude + "-------" + this.startPoint.latitude
              );

              let startPoint = {
                latitude: null, //纬度
                longitude: null, //经度
                name: null,
                address: null,
              };
              AMap.plugin("AMap.Geocoder", function () {
                var geocoder = new AMap.Geocoder({
                  city: "全国",
                  radius: 500,
                  extensions: "all",
                });

                //逆地理解析
                const { KL, kT } = result.position;

                geocoder.getAddress([KL, kT], function (status, result) {
                  if (status === "complete" && result.info === "OK") {
                    // 现在你可以安全地访问location对象
                    // console.log(result.regeocode.addressComponent.province + result.regeocode.addressComponent.district + result.regeocode.addressComponent.street
                    //     + result.regeocode.addressComponent.township + result.regeocode.addressComponent.streetNumber)
                    // console.log(result.regeocode.formattedAddress)
                    var startPoint = {
                      name:
                        result.regeocode.addressComponent.province +
                        result.regeocode.addressComponent.district +
                        result.regeocode.addressComponent.street +
                        result.regeocode.addressComponent.township +
                        result.regeocode.addressComponent.streetNumber,
                      address: result.regeocode.formattedAddress,
                    };
                    console.log(startPoint);
                  } else {
                    // 失败回调 status 统一返回1
                    switch (originMessage) {
                      case "Timeout expired":
                        // 超时
                        break;
                      case "User denied Geolocation":
                        // 拒绝授权
                        break;
                      case "error Network location provider at 'https://www.googleapis.com/' : No response received.":
                        // 不支持定位，定位不可用的浏览器
                        break;
                      default:
                        // 其他错误
                        return;
                    }
                  }
                });
                // resolve(result) //只需要获取经纬把这行打开--上面的resolve注释即可,看自己的需求
              });
              this.startPoint = startPoint;
            }
            // this.startPoint = startPoint;
            // console.log(startPoint)
          });

          this.map.addControl(geolocation);

          // 使用 PlaceSearch 插件进行地点搜索
          this.placeSearch = new AMap.PlaceSearch({
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: "全国", // 兴趣点城市
            citylimit: false, // 是否强制限制在设置的城市内搜索
            map: this.map, // 展现结果的地图实例
            panel: "my-panel", // 结果列表将在此容器中进行展示
            panel: "my-panel", // 结果列表将在此容器中进行展示
            autoFitView: true, // 是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
          });

          // 初始化驾车路线规划服务
          this.driving = new AMap.Driving({
            policy: AMap.DrivingPolicy.LEAST_TIME,
            map: this.map,
            panel: "my-panel",
          });

          this.autoComplete = new AMap.AutoComplete({
            city: "全球",
          });
          this.initMouseTool(AMap);
          //地图工具
          this.initMapTool();
          //路径规划工具初始化
          this.initPathAssign(AMap);
        })
        .catch((e) => {
          console.error(e);
        });
    },

    handleInput() {
      const keyword = this.searchKeyword;
      if (!keyword) {
        this.searchResults = [];
        return;
      }
      this.placeSearch.search(keyword, (status, result) => {
        if (status === "complete" && result.info === "OK") {
          this.searchResults = result.poiList.pois;
        } else {
          console.error("搜索失败", result);
        }
      });
    },

    selectPlace(place) {
      if (!this.start) {
        this.start = place.name;
      } else {
        this.end = place.name;
      }
      this.searchKeyword = "";
      this.searchResults = [];
    },
    //路线搜索
    searchRoute() {
      if (this.start.trim() && this.end.trim()) {
        this.driving.search(
          [
            {
              keyword: this.start.trim(),
            },
            {
              keyword: this.end.trim(),
            },
          ],
          (status, result) => {
            // 回调函数可以处理搜索结果
            if (status === "complete") {
              console.log("绘制驾车路线完成");
            } else {
              console.error("获取驾车数据失败：" + result);
            }
          }
        );
      } else {
        alert("请输入起点和终点");
      }
    },
    draw(type) {
      switch (type) {
        case "marker": {
          this.mouseTool.marker({
            //同Marker的Option设置
          });
          break;
        }
        case "polyline": {
          this.mouseTool.polyline({
            strokeColor: "#80d8ff",
            //同Polyline的Option设置
          });
          break;
        }
        case "polygon": {
          this.mouseTool.polygon({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff",
            //同Polygon的Option设置
          });
          break;
        }
        case "rectangle": {
          this.mouseTool.rectangle({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff",
            //同Polygon的Option设置
          });
          break;
        }
        case "circle": {
          this.mouseTool.circle({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff",
            //同Circle的Option设置
          });
          break;
        }
      }
    },
    drew(type, opts) {
      switch (type) {
        case "marker": {
          opts.map = this.map;
          let o = new AMap.Marker(opts);
          this.overlays.push(o);
          break;
        }
        case "polyline": {
          opts.map = this.map;
          let o = new AMap.Polyline(opts);
          this.overlays.push(o);
          break;
        }
        case "polygon": {
          opts.map = this.map;
          let o = new AMap.Polygon(opts);
          this.overlays.push(o);
          break;
        }
        case "rectangle": {
          opts.map = this.map;
          let o = new AMap.Rectangle(opts);
          this.overlays.push(o);
          break;
        }
        case "circle": {
          opts.map = this.map;
          let o = new AMap.Circle(opts);
          this.overlays.push(o);
          break;
        }
      }
    },
    addhujiao(){
      console.log("最终气死俺"+this.start);
      console.log("最终气死俺"+this.end);
      this.form.pickupLocation=this.start;
      this.form.destination=this.end;
      let carType=this.checkList.join(",")
      this.form.carType=carType;
      addOrder(this.form).then(response => {
        // console.log(response.data.outTradeNo)
        // this.$router.push("/user/decail")
      })
    },
    getCheck(){
      let ll=this.checkList.join(",")
      console.log("vbjvbfv"+ll)
    },
  },
};
</script>

<style>
/* 基础布局和地图容器样式 */
#container {
  width: 50%;
  height: 41vh;
  position: absolute;
  top: 0;
  left: 20rem;
  margin: 0 auto;
  border: 2px solid #4CAF50;  /* 更粗的绿色边框 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);  /* 更明显的阴影 */
}

/* 搜索面板样式 */
#search-panel {
  position: "sticky";
  top: 10px;
  right: 10px;
  background-color: #f8f9fa;  /* 淡灰色背景 */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 300px;
  z-index: 1000;
}

/* 输入框和按钮样式 */
#search-panel input,
#search-panel button {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #4CAF50;  /* 与边框颜色一致 */
  border-radius: 6px;
  font-size: 16px;  /* 增大字体 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

#search-panel input:focus,
#search-panel button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.5);  /* 更明显的聚焦效果 */
}

#search-panel button {
  background-color: #4CAF50;  /* 绿色按钮 */
  color: white;
  cursor: pointer;
}

#search-panel button:hover {
  background-color: #388E3C;  /* 深绿色悬停效果 */
  transform: scale(1.05);
}

#search-panel button:active {
  background-color: #1B5E20;  /* 更深绿色点击效果 */
}

/* 搜索结果列表样式 */
#search-panel ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  background-color: #f8f9fa;  /* 淡灰色背景 */
  border: 1px solid #4CAF50;  /* 绿色边框 */
  max-height: 200px;
  overflow-y: auto;
}

#search-panel li {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #e9ecef;  /* 淡灰色分隔线 */
}

#search-panel li:last-child {
  border-bottom: none;
}

#search-panel li:hover {
  background-color: #e9ecef;  /* 淡灰色悬停效果 */
}

/* 自定义滚动条样式 */
#search-panel ul::-webkit-scrollbar {
  width: 12px;
}

#search-panel ul::-webkit-scrollbar-track {
  background-color: #f8f9fa;  /* 淡灰色轨道 */
  border-radius: 6px;
}

#search-panel ul::-webkit-scrollbar-thumb {
  background-color: #4CAF50;  /* 绿色滚动条 */
  border-radius: 6px;
}

#search-panel ul::-webkit-scrollbar-thumb:hover {
  background-color: #388E3C;  /* 深绿色滚动条悬停效果 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  #search-panel {
    width: auto;
    right: 10px;
    left: 10px;
    bottom: 10px;
    top: auto;
  }
}

.input-item {
  height: 4rem;
}

.input-card-ControlBar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #f8f9fa;  /* 淡灰色背景 */
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 10rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(76, 175, 80, 0.2);  /* 淡绿色阴影 */
  position: absolute;
  top: 1rem;
  left: 78rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}

.input-card-MouseTool {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #f8f9fa;  /* 淡灰色背景 */
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 10rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(76, 175, 80, 0.2);  /* 淡绿色阴影 */
  position: absolute;
  top: 1rem;
  left: 90rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}
</style>
